<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>${film.f_name}</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css"/>
    <style type="text/css">
        li {
            list-style-type: none;
            margin: 0;
            padding: 0;
            font-size: 12px;
            font-family: Hiragino Sans GB;
        }

        #dbody div {
            float: left;
        }
        .nav li:nth-child(2) a{
            border-bottom: 3px #eb002a solid;
            color: #eb002a;
        }
        .center-wrap {
            width: 990px;
            min-width: 990px;
            margin: 0 auto;
            margin-bottom: 10px;
        }

        .center-wrap h3 {
            display: inline-block;
            height: 40px;
            width: 100%;
            line-height: 40px;
            font-size: 20px;
            border-bottom: 1px solid #e5e5e5;
        }

        .filter-select {
            height: 199px;
        }

        .filter-select td {
            height: 74px;
        }

        .filter-select .table-tou {
            width: 90px;
            background-color: #FFDDDC;
            text-align: center;
            color: #797979;
        }

        .hall-table {
            display: table;
            box-sizing: border-box;
            text-indent: initial;
            border-color: grey;
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            color: #797979;
        }

        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
        }

        td {
            text-align: center;
            display: table-cell;
            vertical-align: inherit;
        }

        thead {
            display: table-header-group;
            vertical-align: middle;
            border-color: inherit;
        }

        .hall-table thead {
            font-size: 14px;
            background: #EAEAEA;
        }

        .hall-table thead th {
            height: 40px;
            line-height: 40px;
            font-weight: 400;
            font-size: 14px;
            text-align: center;
        }

        .hall-table tbody td {
            height: 60px;
            line-height: 23px;
        }
        .schedule-wrap {
            width: 100%;
            position: relative;
            min-height: 250px;
        }
        .error-wrap {
            font-size: 14px;
            color: #666;
            margin: 0 auto;
            padding: 145px 30px 60px;
            text-align: center;
            background: url(${pageContext.request.contextPath}/imgs/T1DStRFgFXXXc1sTYg-46-46.png) center 65px no-repeat #f5f4f6;
        }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        .site-nav {
            z-index: 10000;
            width: 100%;
            background-color: #e4e4e4;
            border-bottom: 1px solid #eee;
            overflow: visible;
            position: fixed;
            left: 0px;
            top: 0px;
        }
        .site-nav div {
            margin: 0 auto;
            width: 1190px;
            height: 35px;
            background-color: #e4e4e4;
            z-index: 10002;
            position: relative;
            padding: 0 6px;
            line-height: 35px;
        }

        .site-nav div a {
            float: left;
            margin-right: 7px;
            font-size: 12px;
            color: #6C6C6C;
        }

        .head-wrap {
            padding-top: 36px;
            background-color: #fff;
            z-index: 100;
            /* border-bottom: 1px #e5e5e5 solid; */
        }

        .center-wrap {
            display: block;
            height: 72px;
            width: 990px;
            min-width: 990px;
            margin: 0 auto;
        }

        .nav-wrap {
            float: left;
        }

        .nav-wrap .nav {
            float: left;
            padding-top: 18px;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        }

        .nav li {
            float: left;
            color: #6b6b6b;
            line-height: 42px;
            width: 74px;
            height: 44px;
        }

        .nav li a {
            color: #666;
            font-size: 18px;
            float: left;
            padding: 0 14px;
            margin-right: 10px;
        }
        .tab-movie-tit a {
            display: block;
            margin-right: 30px;
            float: left;
            color: #999;
            font-size: 16px;
            margin-top: 32px;
            line-height: 26px;
            text-decoration: none;
        }

        .tab-movie-tit a.current {
            color: #3e3e3e;
            border-bottom: 2px #eb002a solid;
        }
        .hover {
            transform: translateZ(0);
            position: relative;
            z-index: 100000;
            display: none;
            /* width: 330px;
            height: 100px; */
            float: left;
            margin-left: 170px;
        }

        .hover a {
            color: #000;
        }
    </style>
</head>
<body>

<c:import url="head.jsp" charEncoding="UTF-8" />


<div style="width: 100%;height:400px ;background-color: black;opacity: 0.6; margin-top: 10px;">
    <div class="center-wrap" id="dbody">
        <h3 style="color: white;">${film.f_name}</h3>
        <div>
            <img src="${pageContext.request.contextPath}${film.img_path}" alt="" style="width: 230px;height: 300px;">
        </div>
        <div>
            <ul style="width: 590px;color: white">
                <li>导演：${film.f_director}</li>
                <li>主演：${film.f_players}</li>
                <li>类型：${film.f_type}</li>
                <li>制片国家/地区：${film.f_country}</li>
                <li>片长：${film.f_length}分钟</li>
                <li>上映时间：<fmt:formatDate value="${film.f_time}" pattern="yyyy-MM-dd "/></li>
                <li>剧情介绍：${film.f_synopsis}</li>
            </ul>
        </div>
    </div>
</div>

<div class="center-wrap">
    <h3>选座购票</h3>
</div>
<c:if test="${playVos.size()>0}">
    <div>
        <div class="center-wrap">
            <table class="hall-table">
                <thead>
                <tr>
                    <th>放映时间</th>
                    <th>语言版本</th>
                    <th>放映厅</th>
                    <th>票价</th>
                    <th>选座购票</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${playVos}" var="playVo">
                    <tr>
                        <td><fmt:formatDate value="${playVo.pTime}" pattern="HH:mm:ss "/></td>
                        <td>${playVo.lanType}</td>
                        <td>${playVo.roomName}</td>
                        <td>${playVo.price}</td>
                        <td class="col-sm-2">
                            <c:if test="${sessionScope.user == null || sessionScope.user.right == 1}">
                                <a href="seat?playId=${playVo.pId}" class="btn btn-default" style="background-color: #6C6C6C;pointer-events: none;">选座购票</a>
                            </c:if>
                            <c:if test="${sessionScope.user != null && sessionScope.user.right == 0}">
                                <a href="seat?playId=${playVo.pId}" class="btn btn-danger">选座购票</a>
                            </c:if>

                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</c:if>
<c:if test="${playVos.size() == 0}">
    <div class="schedule-wrap J_scheduleWrap schedule-loaded" >
        <div class="error-wrap">亲，该影片暂无排期，改天再来试试吧</div>
    </div>
</c:if>
</body>

</html>
